'use strict';
import React, { Component } from 'react';
import {
    AppRegistry,
    StatusBar,
    Navigator,
    TouchableOpacity,
    Image,
    PixelRatio,
    ScrollView,
    Text,View,Button,
} from 'react-native';

import Head from './layout/Head';
import styles from '../../assets/css/style.js';
import StatusCheckUtils from '../util/StatusCheckUtils';
import GlobalConfig from '../util/Global';

export default class StatusView extends Component{
    constructor(props){
        super(props);
        this.state={
            top01:true,
            top02:false,
            top03:false,
            top04:false

        }
    }
    togs(t){
        if(t=="top01"){
            this.setState({
                top01:!this.state.top01
            })
        }else if(t=="top02"){
            this.setState({
                top02:!this.state.top02
            })
        }else if(t=="top03"){
            this.setState({
                top03:!this.state.top03
            })
        }else if(t=="top04"){
            this.setState({
                top04:!this.state.top04
            })
        }

    }
    render(){
        //const {navigate} = this.props.navigation;
        var lists=[["测试功能", "icon_in", GlobalConfig.TESTING_VIEW], 
                    ["设 置", "icon_sz", GlobalConfig.SETTING_VIEW]];
        return (
            <View style={[styles.flex,styles.bgcolor]}>
                {/*<Head title="状态查看" ref='head' list={lists} navigate={navigate}> </Head>*/}
                <Head title="状态查看" ref='head' list={lists}> </Head>
                    <View style={[styles.flex,styles.bgcolor]}>
                        <ScrollView style={styles.ztScroll}>
                            <TouchableOpacity activeOpacity={1} onPress={() => this.refs.head.hideMenu()}>
                            <View style={styles.ztwrap}>
                                <View>
                                    <View style={styles.topIcons}>
                                        <Image
                                            style={styles.ztIcon_01}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_phone.png')}
                                        />
                                        <Image
                                            style={styles.ztIcon_02}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_sceen.png')}
                                        />
                                        <Image
                                            style={styles.ztIcon_03}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_com.png')}
                                        />
                                    </View>
                                    <View style={styles.ztculoms}>
                                        <Text style={styles.ztFont_01}>
                                            上联端口连接状态：
                                            <Text style={styles.ztFont_01}>
                                                正常
                                            </Text>
                                        </Text>
                                        <Text style={styles.ztFont_01}>
                                            下挂设备数量：
                                            <Text style={styles.ztFont_01}>
                                                10
                                            </Text>
                                        </Text>
                                    </View>
                                </View>
                            </View>
                            <View style={styles.ztCenters}>
                                <View style={styles.ztListAll}>
                                    <View style={styles.ztList_01}>
                                        <TouchableOpacity style={styles.ztList_touch} onPress={this.togs.bind(this,"top01")}>
                                            <Image
                                                style={styles.ztList_img}
                                                resizeMode="contain"
                                                source={require('../../assets/img/icon_list.png')}
                                            />
                                            <Text style={styles.ztList_font}>网管设备信息</Text>
                                            <Image
                                                style={[styles.ztList_ri,styles.ztList_set]}
                                                resizeMode="contain"
                                                source={this.state.top01?GlobalConfig.IMG["ztImg_bu"]:GlobalConfig.IMG["ztImg_ri"]}
                                            />
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.top01?
                                        <View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>设备型号</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>设备MAC</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>设备序列号</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>硬件版本</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>软件版本</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>CPU使用率</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                            <View style={styles.ztList_02}>
                                                <Text style={styles.ztList_font02}>内存使用率</Text>
                                                <Text style={styles.ztList_font02}>HUAWEI</Text>
                                            </View>
                                        </View>
                                        :null}

                                </View>
                                <View style={styles.ztListAll}>
                                    <View style={styles.ztList_01}>
                                        <TouchableOpacity style={styles.ztList_touch} onPress={this.togs.bind(this,"top02")}>
                                            <Image
                                                style={styles.ztList_img}
                                                resizeMode="contain"
                                                source={require('../../assets/img/icon_list04.png')}
                                            />
                                            <Text style={styles.ztList_font}>WAN口信息</Text>
                                            <Image
                                                style={[styles.ztList_ri,styles.ztList_set]}
                                                resizeMode="contain"
                                                source={this.state.top02?GlobalConfig.IMG["ztImg_bu"]:GlobalConfig.IMG["ztImg_ri"]}
                                            />
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.top02?
                                    <View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>接口名称</Text>
                                            <Text style={styles.ztList_font02}>接口1</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>接口描述</Text>
                                            <Text style={styles.ztList_font02}>接口1</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>连接类型</Text>
                                            <Text style={styles.ztList_font02}>wifi</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>VLANID号</Text>
                                            <Text style={styles.ztList_font02}>sdDCmKl</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>优先级</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>协议类型</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>连接状态</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>IPV4地址</Text>
                                            <Text style={styles.ztList_font02}>Phone</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>IPV6地址</Text>
                                            <Text style={styles.ztList_font02}>Phone</Text>
                                        </View>
                                    </View>
                                        :null}
                                </View>
                                <View style={styles.ztListAll}>
                                    <View style={styles.ztList_01}>
                                        <TouchableOpacity style={styles.ztList_touch} onPress={this.togs.bind(this,"top03")}>
                                            <Image
                                                style={styles.ztList_img}
                                                resizeMode="contain"
                                                source={require('../../assets/img/icon_list03.png')}
                                            />
                                            <Text style={styles.ztList_font}>WIFI情况查看</Text>
                                            <Image
                                                style={[styles.ztList_ri,styles.ztList_set]}
                                                resizeMode="contain"
                                                source={this.state.top03?GlobalConfig.IMG["ztImg_bu"]:GlobalConfig.IMG["ztImg_ri"]}
                                            />
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.top03?
                                    <View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>WIFI协议类型</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                                <Text style={[styles.ztList_font02,styles.ztList_font03]}  onPress={() => StatusCheckUtils.signalChannel(navigate)}>信号道</Text>
                                                <Text style={[styles.ztList_font02,styles.ztList_font03]}  onPress={() => StatusCheckUtils.signalChannel(navigate)}>
                                                    信道1
                                                </Text>
                                                <Image
                                                    style={styles.ztList_ri}
                                                    resizeMode="contain"
                                                    source={require('../../assets/img/icon_ri.png')}
                                                />
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>信道频宽</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>发射功率</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                    </View>
                                        :null}
                                </View>
                                <View style={styles.ztListAll}>
                                    <View style={styles.ztList_01}>
                                        <TouchableOpacity style={styles.ztList_touch} onPress={this.togs.bind(this,"top04")}>
                                            <Image
                                                style={styles.ztList_img}
                                                resizeMode="contain"
                                                source={require('../../assets/img/icon_list02.png')}
                                            />
                                            <Text style={styles.ztList_font} onPress={() => StatusCheckUtils.underbarrelDevice(navigate)}>下挂设备查看</Text>
                                            <Image
                                                style={[styles.ztList_ri,styles.ztList_set]}
                                                resizeMode="contain"
                                                source={this.state.top04?GlobalConfig.IMG["ztImg_bu"]:GlobalConfig.IMG["ztImg_ri"]}
                                            />
                                        </TouchableOpacity>
                                    </View>
                                    {this.state.top04?
                                    <View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>设备名称</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>IP地址</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>连接时长</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>接入方式</Text>
                                            <Text style={styles.ztList_font02}>2.4GHZ</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>上行端口速率</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                        <View style={styles.ztList_02}>
                                            <Text style={styles.ztList_font02}>下行端口速率</Text>
                                            <Text style={styles.ztList_font02}>HUAWEI</Text>
                                        </View>
                                    </View>
                                        :null}
                                </View>
                                <View style={[styles.ztListAll,styles.ztBottom]}>
                                    <View style={styles.ztList_01}>
                                        <Image
                                            style={styles.ztList_img}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_list01.png')}
                                        />
                                        <Text style={styles.ztList_font} >流量查看</Text>
                                    </View>
                                    <View style={styles.ztList_02}>
                                        <Text style={[styles.ztList_font02,styles.ztList_font03]} activeOpacity={1} onPress={() => StatusCheckUtils.dataFlow(navigate)}>详细信息</Text>
                                        <Text style={[styles.ztList_font02,styles.ztList_font03]} activeOpacity={1} onPress={() => StatusCheckUtils.dataFlow(navigate)}>
                                            查看
                                        </Text>
                                        <Image
                                            style={styles.ztList_ri}
                                            resizeMode="contain"
                                            source={require('../../assets/img/icon_ri.png')}
                                        />
                                    </View>

                                </View>
                            </View>
                            </TouchableOpacity>
                        </ScrollView>
                        
                    </View>
                
            </View>
        )
    }
}

//export default SimpleApp;
//module.exports=ZhuangTai;
//export default zhuangTai
AppRegistry.registerComponent('iHGuapp', () => StatusView);